<template>
  <div class="runner-container">
    <div class="game-area">
      <!-- 游戏主区域 -->
      <div class="game-board" ref="gameBoard" tabindex="0" @keydown="handleKeydown">
        <div class="ground"></div>
        <div class="player" :class="{ 'jump': isJumping, 'dead': isDead }" :style="playerStyle"></div>
        <div v-for="(obstacle, index) in obstacles" 
             :key="index" 
             class="obstacle"
             :style="{ left: obstacle.x + 'px' }">
        </div>
        <div class="score">{{ score }}</div>
      </div>

      <!-- 游戏信息面板 -->
      <div class="game-panel">
        <div class="game-stats">
          <div class="stat-item">
            <span class="stat-label">当前分数</span>
            <span class="stat-value">{{ score }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">最高分数</span>
            <span class="stat-value">{{ highScore }}</span>
          </div>
        </div>

        <div class="game-controls">
          <button class="control-button" @click="startGame" :disabled="isPlaying">
            开始游戏
          </button>
          <button class="control-button" @click="pauseGame" :disabled="!isPlaying">
            {{ isPaused ? '继续' : '暂停' }}
          </button>
          <button class="control-button" @click="resetGame" :disabled="isPlaying && !isPaused">
            重新开始
          </button>
        </div>

        <div class="game-instructions">
          <h3>操作说明</h3>
          <ul>
            <li>空格键/↑键 : 跳跃</li>
            <li>P键 : 暂停/继续</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'

// 游戏配置
const GRAVITY = 0.6
const JUMP_FORCE = -12
const GROUND_HEIGHT = 50
const PLAYER_WIDTH = 40
const PLAYER_HEIGHT = 40
const OBSTACLE_WIDTH = 30
const OBSTACLE_HEIGHT = 40
const GAME_SPEED = 5
const MIN_OBSTACLE_DISTANCE = 300

// 游戏状态
const score = ref(0)
const highScore = ref(0)
const isPlaying = ref(false)
const isPaused = ref(false)
const isDead = ref(false)
const isJumping = ref(false)
const playerVelocity = ref(0)
const playerY = ref(GROUND_HEIGHT)
const obstacles = ref([])
const gameBoard = ref(null)

let gameLoop = null
let obstacleLoop = null

// 计算玩家样式
const playerStyle = computed(() => ({
  bottom: `${playerY.value}px`
}))

// 初始化游戏
const initGame = () => {
  score.value = 0
  isDead.value = false
  isJumping.value = false
  playerVelocity.value = 0
  playerY.value = GROUND_HEIGHT
  obstacles.value = []
}

// 生成障碍物
const generateObstacle = () => {
  if (!isPlaying.value || isPaused.value) return
  
  const lastObstacle = obstacles.value[obstacles.value.length - 1]
  if (!lastObstacle || lastObstacle.x < 600 - MIN_OBSTACLE_DISTANCE) {
    obstacles.value.push({
      x: 600,
      width: OBSTACLE_WIDTH,
      height: OBSTACLE_HEIGHT
    })
  }
}

// 更新游戏状态
const updateGame = () => {
  if (!isPlaying.value || isPaused.value) return

  // 更新玩家位置
  playerVelocity.value += GRAVITY
  playerY.value = Math.max(GROUND_HEIGHT, playerY.value - playerVelocity.value)
  
  if (playerY.value === GROUND_HEIGHT) {
    isJumping.value = false
  }

  // 更新障碍物位置
  obstacles.value.forEach(obstacle => {
    obstacle.x -= GAME_SPEED
  })
  
  // 移除超出屏幕的障碍物
  obstacles.value = obstacles.value.filter(obstacle => obstacle.x > -OBSTACLE_WIDTH)

  // 检测碰撞
  if (checkCollision()) {
    endGame()
    return
  }

  // 更新分数
  score.value++
  if (score.value > highScore.value) {
    highScore.value = score.value
  }
}

// 碰撞检测
const checkCollision = () => {
  const playerLeft = 50
  const playerRight = playerLeft + PLAYER_WIDTH
  const playerTop = playerY.value + PLAYER_HEIGHT
  const playerBottom = playerY.value

  return obstacles.value.some(obstacle => {
    const obstacleLeft = obstacle.x
    const obstacleRight = obstacle.x + obstacle.width
    const obstacleTop = GROUND_HEIGHT + obstacle.height
    const obstacleBottom = GROUND_HEIGHT

    return !(playerBottom >= obstacleTop ||
             playerTop <= obstacleBottom ||
             playerRight <= obstacleLeft ||
             playerLeft >= obstacleRight)
  })
}

// 跳跃
const jump = () => {
  if (playerY.value === GROUND_HEIGHT) {
    playerVelocity.value = JUMP_FORCE
    isJumping.value = true
  }
}

// 键盘控制
const handleKeydown = (event) => {
  if (!isPlaying.value || isPaused.value) return

  switch (event.code) {
    case 'Space':
    case 'ArrowUp':
      event.preventDefault()
      jump()
      break
    case 'KeyP':
      pauseGame()
      break
  }
}

// 游戏控制
const startGame = () => {
  if (isPlaying.value) return
  
  initGame()
  isPlaying.value = true
  isPaused.value = false
  gameBoard.value?.focus()
  
  gameLoop = setInterval(updateGame, 1000 / 60)
  obstacleLoop = setInterval(generateObstacle, 2000)
}

const pauseGame = () => {
  if (!isPlaying.value) return
  isPaused.value = !isPaused.value
}

const resetGame = () => {
  clearInterval(gameLoop)
  clearInterval(obstacleLoop)
  gameLoop = null
  obstacleLoop = null
  isPlaying.value = false
  isPaused.value = false
  initGame()
}

const endGame = () => {
  isPlaying.value = false
  isPaused.value = false
  isDead.value = true
  clearInterval(gameLoop)
  clearInterval(obstacleLoop)
  alert(`游戏结束！\n最终得分：${score.value}\n最高分：${highScore.value}`)
}

// 生命周期钩子
onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
  initGame()
})

onUnmounted(() => {
  clearInterval(gameLoop)
  clearInterval(obstacleLoop)
  window.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
.runner-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: var(--theme-container-bg, #1a1a1a);
}

.game-area {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: var(--theme-bg, #2d2d2d);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.game-board {
  width: 600px;
  height: 300px;
  position: relative;
  border: 2px solid var(--theme-border-color, #404040);
  background-color: var(--theme-container-bg, #1a1a1a);
  overflow: hidden;
  outline: none;
}

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: var(--theme-border-color, #404040);
}

.player {
  position: absolute;
  left: 50px;
  width: 40px;
  height: 40px;
  background-color: var(--theme-primary-color, #10b981);
  transition: transform 0.1s;
}

.player.jump {
  animation: jump 0.5s linear;
}

.player.dead {
  background-color: var(--theme-error-color, #ef4444);
}

.obstacle {
  position: absolute;
  bottom: 50px;
  width: 30px;
  height: 40px;
  background-color: var(--theme-error-color, #ef4444);
}

.score {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  color: var(--theme-text-color, #e2e8f0);
}

.game-panel {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 其他样式与之前的游戏相同 */
.game-stats {
  background-color: var(--theme-container-bg, #1a1a1a);
  padding: 15px;
  border-radius: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--theme-text-color, #e2e8f0);
}

.stat-label {
  font-size: 14px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: var(--theme-primary-color, #60a5fa);
}

.game-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-button {
  padding: 10px;
  border: none;
  border-radius: 6px;
  background-color: var(--theme-primary-color, #3b82f6);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.control-button:hover:not(:disabled) {
  background-color: var(--theme-primary-hover, #2563eb);
}

.control-button:disabled {
  background-color: var(--theme-secondary-color, #4b5563);
  cursor: not-allowed;
}

.game-instructions {
  background-color: var(--theme-container-bg, #1a1a1a);
  padding: 15px;
  border-radius: 8px;
  color: var(--theme-text-color, #e2e8f0);
}

.game-instructions h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.game-instructions ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.game-instructions li {
  margin: 5px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .game-area {
    flex-direction: column;
    padding: 10px;
  }

  .game-board {
    width: 100%;
    max-width: 600px;
    height: 300px;
  }

  .game-panel {
    width: 100%;
    max-width: 300px;
  }
}
</style> 